<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Highcharts Example</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script type="text/javascript">
		$(function () {
			// Set up the chart
			var chart = new Highcharts.Chart({
				chart: {
					renderTo: 'container',
					type: 'column',
					margin: 75,
					options3d: {
						enabled: true,
						alpha: 15,
						beta: 15,
						depth: 50,
						viewDistance: 25
					}
				},
				title: {
					text: 'Chart rotation demo'
				},
				subtitle: {
					text: 'Test options by dragging the sliders below'
				},
				plotOptions: {
					column: {
						depth: 25
					}
				},
				series: [{
					data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
				}]
			});


			// Activate the sliders
			$('#R0').on('change', function () {
				chart.options.chart.options3d.alpha = this.value;
				showValues();
				chart.redraw(false);
			});
			$('#R1').on('change', function () {
				chart.options.chart.options3d.beta = this.value;
				showValues();
				chart.redraw(false);
			});

			function showValues() {
				$('#R0-value').html(chart.options.chart.options3d.alpha);
				$('#R1-value').html(chart.options.chart.options3d.beta);
			}

			showValues();
		});
	</script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-3d.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container"></div>
<div id="sliders">
	<table>
		<tr>
			<td>Alpha Angle</td>
			<td><input id="R0" type="range" min="0" max="45" value="15"/> <span id="R0-value" class="value"></span></td>
		</tr>
		<tr>
			<td>Beta Angle</td>
			<td><input id="R1" type="range" min="0" max="45" value="15"/> <span id="R1-value" class="value"></span></td>
		</tr>
	</table>
</div>
</body>
</html>
